<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#div1 button{
				width: 60px;
				height: 30px;
				outline: none;
			}
			#div1 button.active{
				background:lightblue;
			}
			#div1 div{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				display: none;
				text-align: center;
				line-height: 200px;
				font-size: 20px;
			}
			#div1 div.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<button class="active">按钮1</button>
			<button>按钮2</button>
			<button>按钮3</button>
			<div class="active">内容1</div>
			<div>内容2</div>
			<div>内容3</div>
		</div>
		<script>
            window.onload=function(){
             var tab=new Tab("#div1");
             tab.fun();
            }
            
            function Tab(id){
            	this.div1=document.querySelector(id);
	            this.btn=this.div1.querySelectorAll("button");
	            this.div=this.div1.querySelectorAll("div");
            }
            
            Tab.prototype.fun=function(){
            	for(var i=0;i<this.btn.length;i++){
	            	this.btn[i].index=i;
	            	var This=this;
	            	this.btn[i].onclick=function(){
	            		This.qh(this);
	            	};
	            }
            }
            
            Tab.prototype.qh=function(oBtn){
	            	for(var i=0;i<this.btn.length;i++){
	        			this.btn[i].className="";
	        			this.div[i].style.display="none";
	        		}
	        		oBtn.className="active";
	        		this.div[oBtn.index].style.display="block";
            }
        
			
            
		</script>
	</body>
</html>
